<!DOCTYPE html >
<!--[if IE 7]><html class="ie ie7 no-js" lang="en-US"><!
[endif]--><!--[if IE 8]><html class="ie ie8 no-js" lang="en-US"><!
[endif]--><!--[if !(IE 7) | !(IE 8)]><!-->
<html lang="en" class="no-js" xmlns:th="http://www.thymeleaf.org">
  <head>
    <!-- Basic need -->
    <title>电影可视化推荐系统</title>
    <meta charset="UTF-8" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta name="author" content="" />
    <link rel="profile" href="" />
    <!--Google Font-->
    <link rel="stylesheet" href="/assets/css/css.css" />
    <!-- Mobile specific meta -->
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="format-detection" content="telephone-no" />
    <!-- CSS files -->
    <link rel="stylesheet" href="/assets/css/plugins.css" />
    <link rel="stylesheet" href="/assets/css/style.css" />
    <link href="//unpkg.com/layui@2.9.3/dist/css/layui.css" rel="stylesheet">

  </head>
  <body>
    <!--preloading-->
    <div id="preloader">
      <img
        class="logo"
        src="/assets/picture/logo1.png"
        alt=""
        width="119"
        height="58"
      />
      <div id="status"><span></span><span></span></div>
    </div>
    <!--end of preloading--><!--login form popup-->
    <div th:replace="~{movie/common::login-content}"></div>
    <!--end of login form popup--><!--signup form popup-->
    <div th:replace="~{movie/common::signup-content}"></div>
    <!--end of signup form popup--><!-- BEGIN | Header -->
    <div th:replace="~{movie/common::common_header}"></div>

    <!-- END | Header -->
    <div class="hero mv-single-hero">
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <!-- <h1>movie listing - list</h1><ul class="breadcumb"><li class="active"><a href="#">Home</a></li><li><span class="ion-ios-arrow-right"></span>movie listing</li></ul>-->
          </div>
        </div>
      </div>
    </div>
    <div class="page-single movie-single movie_single">
      <div class="container">
        <div class="row ipad-width2">
          <div class="col-md-4 col-sm-12 col-xs-12">
            <div class="movie-img sticky-sb">
              <img src="/assets/picture/movie-single.jpg"  th:src="${movie.getImg()}" alt="" />
              <div class="movie-btn">
                <div class="btn-transform transform-vertical red">
                  <div>
                    <a href="#" class="item item-1 redbtn"
                       th:href="@{https://v.qq.com/x/search/(q=${movie.getName()})}"
                      ><i class="ion-play"></i>观看电影</a
                    >
                  </div>
                  <div>
                    <a
                            th:href="@{https://v.qq.com/x/search/(q=${movie.getName()})}"
                      class="item item-2 redbtn fancybox-media hvr-grow"
                      ><i class="ion-play"></i
                    ></a>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-8 col-sm-12 col-xs-12">
            <div class="movie-single-ct main-content">
              <h1 class="bd-hd">
                [[${movie.getName()}]] <span></span>
              </h1>
              <div class="social-btn" style="margin-bottom: 20px" th:if="${collect==null}">
                <a id="collect-btn" href="javascript:;" class="parent-btn"
                ><i class="ion-heart"></i>加入收藏</a
                >
                <div class="movie-rate">
                  <div class="rate">
                    <i class="ion-android-star"></i>
                    <p>
                      <span>[[${movie.getRate()}]]</span>/10<br />
<!--                      <span class="rv">56 Reviews</span>-->
                    </p>
                  </div>
                </div>
              </div>
              <div class="social-btn" style="margin-bottom: 20px" th:unless="${collect==null}">
                <a href="javascript:;" class="parent-btn"
                ><i class="ion-checkmark-round"></i>已收藏</a>
                <div class="movie-rate">
                  <div class="rate">
                    <i class="ion-android-star"></i>
                    <p>
                      <span>[[${movie.getRate()}]]</span>/10<br />
<!--                      <span class="rv">56 Reviews</span>-->
                    </p>
                  </div>
                </div>
              </div>

              <div style="height: 200px;">
                 <form class="layui-form" action="/movierating" method="post" id="rating-form" th:if="${comment==null}">
                    <div id="ID-rate-demo"></div>
                   <input id="inputrate" type="hidden" name="rate">
                   <input id="inputuserid" type="hidden" name="userid">
                   <input id="inputmovieid" type="hidden" name="movieid" th:value="${movie.getId()}">

                   <div class="layui-form-item layui-form-text">
                      <div class="layui-input-block" style="margin-left: 0px;">
                        <textarea placeholder="请写你的评论" class="layui-textarea" style="background-color:#0e1111;border: red;color: #42566a;font-size: 16px" name="comment"></textarea>
                      </div>
                    </div>
                    <div class="layui-form-item">
                      <div class="layui-input-block" style="margin-left: 0px">
                        <button type="button" id="rating-btn"  class="layui-btn" lay-submit lay-filter="demo1" style="background-color: #dd003f;">立即提交</button>

                      </div>
                    </div>
                  </form>
                <div class="mv-user-review-item" style="margin-top: 30px;" th:unless="${comment==null}">
                  <h3 style="color:#dcf836;">我的评价</h3>
                  <div class="no-star" style="margin-top: 10px;font-size: 20px">
                    <i class="ion-android-star" th:each="i:${#numbers.sequence(1,comment.getScore())}">

                    </i>
                  </div>
                  <p class="time" style="margin-top: 7px">
                    [[${#dates.format(comment.getCreateTime(),'yyyy-MM-dd')}]] by [[${session.user.getUsername()}]]
                  </p>
                  <p>
                    [[${comment.getComment()}]]
                  </p>
                </div>
              </div>
              <div class="movie-tabs">
                <div class="tabs">
                  <ul class="tab-links tabs-mv">
                    <li class="active"><a href="#overview">概览</a></li>
                    <li><a href="#reviews">评论</a></li>
                    <!-- <li><a href="#cast"> Cast & Crew </a></li> -->
                    <li><a href="#media">剧照</a></li>
<!--                    <li><a href="#moviesrelated">Related Movies</a></li>-->
                  </ul  >
                  <div class="tab-content">
                    <div id="overview" class="tab active">
                      <div class="row">
                        <div class="col-md-8 col-sm-12 col-xs-12">
                          <p>
                            [[${movie.getInfo()}]]
                          </p>
                          <div class="title-hd-sm">
                            <h4>Videos & Photos</h4>
<!--                            <a href="#" class="time"-->
<!--                              >All 5 Videos & 245 Photos-->
<!--                              <i class="ion-ios-arrow-right"></i-->
<!--                            ></a>-->
                          </div>
                          <div class="mvsingle-item ov-item">
                            <a th:each="photo,status:${photos}"
                               th:if="${status.index} le 1"
                              class="img-lightbox"
                              data-fancybox-group="gallery"
                               th:href="${photo}"
                              href="/assets/picture/image11.jpg"
                              ><img src="/assets/picture/image1.jpg" alt=""
                            th:src="${photo}"/></a
                            >

                          </div>
                          <div class="title-hd-sm">
                            <h4>User reviews</h4>
<!--                            <a href="#" class="time"-->
<!--                              >See All 56 Reviews-->
<!--                              <i class="ion-ios-arrow-right"></i-->
<!--                            ></a>-->
                          </div>
                          <!-- movie user review -->
                          <div class="mv-user-review-item" th:if="${not #lists.isEmpty(cominfo.getList())}" >
<!--                            <h3>Best Marvel movie in my opinion</h3>-->
                            <div class="no-star">
                              <i class="ion-android-star" th:each="i:${#numbers.sequence(1,cominfo.getList().get(0).getScore())}">
                              </i>
                              <i class="ion-android-star last" th:each="i:${#numbers.sequence(cominfo.getList().get(0).getScore(),9)}">
                              </i>
                            </div>
                            <p class="time">
                              [[${#dates.format(cominfo.getList().get(0).getCreateTime(),'yyyy-MM-dd')}]]
                            </p>
                            <p>
                              [[${cominfo.getList().get(0).getComment()}]]
                            </p>
                          </div>
                        </div>
                        <div class="col-md-4 col-xs-12 col-sm-12">
                          <div class="sb-it">
                            <h6>导演:</h6>
                            <p>[[${movie.getDirect()}]]</p>
                          </div>
                          <div class="sb-it">
                            <h6>演员:</h6>

                            <p>[[${movie.getStarts()}]]</p>
                          </div>
                          <div class="sb-it">
                            <h6>发布时间:</h6>
                            <p>[[${movie.getPublicTime()}]]</p>
                          </div>
                          <div class="sb-it">
                            <h6>时长:</h6>
                            <p>[[${movie.getRuntime()}]]</p>
                          </div>

                          <div class="sb-it">
                            <h6>Plot Keywords:</h6>
                            <p>[[${movie.getType()}]]</p>


                          </div>

                        </div>
                      </div>
                    </div>
                    <div id="reviews" class="tab review">
                      <div class="row">
<!--                        <div class="rv-hd">-->
<!--                          <div class="div">-->
<!--                            <h3>Related Movies To</h3>-->
<!--                            <h2>Skyfall: Quantum of Spectre</h2>-->
<!--                          </div>-->
<!--                          <a href="#" class="redbtn">Write Review</a>-->
<!--                        </div>-->
                        <div class="topbar-filter">
                          <p>找到了 <span>[[${cominfo.total}]]</span>条评论</p>
                        </div>
                        <div class="mv-user-review-item" th:if="${not #lists.isEmpty(cominfo.getList())}" th:each="com:${cominfo.getList()}">
                          <div class="user-infor">
<!--                            <img src="/assets/picture/userava1.jpg" alt="" />-->
                            <div>
<!--                              <h3>Best Marvel movie in my opinion</h3>-->
                              <div class="no-star">
                                <i class="ion-android-star" th:each="i:${#numbers.sequence(1,com.getScore())}">
                                </i>
                                <i class="ion-android-star last" th:each="i:${#numbers.sequence(com.getScore()+1,10)}">
                                </i>
                              </div>
                              <p class="time">
                                [[${#dates.format(com.getCreateTime(),'yyyy-MM-dd')}]]
<!--                                <a href="#">hawaiipierson</a>-->
                              </p>
                            </div>
                          </div>
                          <p>
                            [[${com.getComment()}]]
                          </p>
                        </div>
                        <div class="topbar-filter">

                          <div class="pagination2">
                            <span>Page [[${cominfo.pageNum}]] of [[${cominfo.pages}]]:</span>
                            <a th:href="@{/movies(page=${cominfo.prePage})}" th:if="${cominfo.hasPreviousPage}"><i class="ion-arrow-left-b"></i></a>
                            <a th:each="num:${cominfo.navigatepageNums}" th:href="@{/movies(page=${num})}">
                              [[${num}]]
                            </a>
                            <a th:href="@{/movies(page=${nextPage})}" th:if="${cominfo.hasNextPage}"><i class="ion-arrow-right-b"></i></a>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div id="cast" class="tab">
                      <div class="row">
                        <h3>Cast & Crew of</h3>
                        <h2>Avengers: Age of Ultron</h2>
                        <!-- //== -->
                        <div class="title-hd-sm">
                          <h4>Directors & Credit Writers</h4>
                        </div>
                        <div class="mvcast-item">
                          <div class="cast-it">
                            <div class="cast-left">
                              <h4>JW</h4>
                              <a href="#">Joss Whedon</a>
                            </div>
                            <p>... Director</p>
                          </div>
                        </div>
                        <!-- //== -->
                        <div class="title-hd-sm">
                          <h4>Directors & Credit Writers</h4>
                        </div>
                        <div class="mvcast-item">
                          <div class="cast-it">
                            <div class="cast-left">
                              <h4>SL</h4>
                              <a href="#">Stan Lee</a>
                            </div>
                            <p>... (based on Marvel comics)</p>
                          </div>
                          <div class="cast-it">
                            <div class="cast-left">
                              <h4>JK</h4>
                              <a href="#">Jack Kirby</a>
                            </div>
                            <p>... (based on Marvel comics)</p>
                          </div>
                          <div class="cast-it">
                            <div class="cast-left">
                              <h4>JS</h4>
                              <a href="#">Joe Simon</a>
                            </div>
                            <p>... (character created by: Captain America)</p>
                          </div>
                          <div class="cast-it">
                            <div class="cast-left">
                              <h4>JS</h4>
                              <a href="#">Joe Simon</a>
                            </div>
                            <p>... (character created by: Thanos)</p>
                          </div>
                          <div class="cast-it">
                            <div class="cast-left">
                              <h4>RT</h4>
                              <a href="#">Roy Thomas</a>
                            </div>
                            <p>... (character created by: Ultron, Vision)</p>
                          </div>
                          <div class="cast-it">
                            <div class="cast-left">
                              <h4>JB</h4>
                              <a href="#">John Buscema</a>
                            </div>
                            <p>... (character created by: Ultron, Vision)</p>
                          </div>
                        </div>
                        <!-- //== -->
                        <div class="title-hd-sm"><h4>Cast</h4></div>
                        <div class="mvcast-item">
                          <div class="cast-it">
                            <div class="cast-left">
                              <img src="/assets/picture/cast1.jpg" alt="" /><a
                                href="#"
                                >Robert Downey Jr.</a
                              >
                            </div>
                            <p>... Robert Downey Jr.</p>
                          </div>
                          <div class="cast-it">
                            <div class="cast-left">
                              <img src="/assets/picture/cast2.jpg" alt="" /><a
                                href="#"
                                >Chris Hemsworth</a
                              >
                            </div>
                            <p>... Thor</p>
                          </div>
                          <div class="cast-it">
                            <div class="cast-left">
                              <img src="/assets/picture/cast3.jpg" alt="" /><a
                                href="#"
                                >Mark Ruffalo</a
                              >
                            </div>
                            <p>... Bruce Banner/ Hulk</p>
                          </div>
                          <div class="cast-it">
                            <div class="cast-left">
                              <img src="/assets/picture/cast4.jpg" alt="" /><a
                                href="#"
                                >Chris Evans</a
                              >
                            </div>
                            <p>... Steve Rogers/ Captain America</p>
                          </div>
                          <div class="cast-it">
                            <div class="cast-left">
                              <img src="/assets/picture/cast5.jpg" alt="" /><a
                                href="#"
                                >Scarlett Johansson</a
                              >
                            </div>
                            <p>... Natasha Romanoff/ Black Widow</p>
                          </div>
                          <div class="cast-it">
                            <div class="cast-left">
                              <img src="/assets/picture/cast6.jpg" alt="" /><a
                                href="#"
                                >Jeremy Renner</a
                              >
                            </div>
                            <p>... Clint Barton/ Hawkeye</p>
                          </div>
                          <div class="cast-it">
                            <div class="cast-left">
                              <img src="/assets/picture/cast7.jpg" alt="" /><a
                                href="#"
                                >James Spader</a
                              >
                            </div>
                            <p>... Ultron</p>
                          </div>
                          <div class="cast-it">
                            <div class="cast-left">
                              <img src="/assets/picture/cast9.jpg" alt="" /><a
                                href="#"
                                >Don Cheadle</a
                              >
                            </div>
                            <p>... James Rhodes/ War Machine</p>
                          </div>
                        </div>
                        <!-- //== -->
                        <div class="title-hd-sm"><h4>Produced by</h4></div>
                        <div class="mvcast-item">
                          <div class="cast-it">
                            <div class="cast-left">
                              <h4>VA</h4>
                              <a href="#">Victoria Alonso</a>
                            </div>
                            <p>... executive producer</p>
                          </div>
                          <div class="cast-it">
                            <div class="cast-left">
                              <h4>MB</h4>
                              <a href="#">Mitchel Bell</a>
                            </div>
                            <p>... co-producer (as Mitch Bell)</p>
                          </div>
                          <div class="cast-it">
                            <div class="cast-left">
                              <h4>JC</h4>
                              <a href="#">Jamie Christopher</a>
                            </div>
                            <p>... associate producer</p>
                          </div>
                          <div class="cast-it">
                            <div class="cast-left">
                              <h4>LD</h4>
                              <a href="#">Louis D’Esposito</a>
                            </div>
                            <p>... executive producer</p>
                          </div>
                          <div class="cast-it">
                            <div class="cast-left">
                              <h4>JF</h4>
                              <a href="#">Jon Favreau</a>
                            </div>
                            <p>... executive producer</p>
                          </div>
                          <div class="cast-it">
                            <div class="cast-left">
                              <h4>KF</h4>
                              <a href="#">Kevin Feige</a>
                            </div>
                            <p>... producer</p>
                          </div>
                          <div class="cast-it">
                            <div class="cast-left">
                              <h4>AF</h4>
                              <a href="#">Alan Fine</a>
                            </div>
                            <p>... executive producer</p>
                          </div>
                          <div class="cast-it">
                            <div class="cast-left">
                              <h4>JF</h4>
                              <a href="#">Jeffrey Ford</a>
                            </div>
                            <p>... associate producer</p>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div id="media" class="tab">
                      <div class="row" style="margin-top: -50px">
                        <div class="title-hd-sm">
                          <h4>Photos</h4>
                        </div>
                        <div class="mvsingle-item">
                         <a class="img-lightbox" th:each="photo:${photos}"
                            data-fancybox-group="gallery"
                            href="/assets/picture/image211.jpg" th:href="${photo}"><img th:src="${photo}" src="/assets/picture/image2-1.jpg" alt=""/></a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- footer section-->
    <!-- end of footer section-->
    <script src="/assets/js/jquery.js"></script>
    <script src="/assets/js/plugins.js"></script>
    <script src="/assets/js/plugins2.js"></script>
    <script src="/assets/js/custom.js"></script>
    <script src="//unpkg.com/layui@2.9.3/dist/layui.js"></script>
    <script>
      layui.use(function(){
        var rate = layui.rate;
        // 渲染
        rate.render({
          length: 10,
          elem: '#ID-rate-demo',
          choose: function(value){
            document.getElementById("inputrate").value = value;
            console.log(value); // 获得选中的评分值
          }
        });
      });
    </script>
      <script th:inline="javascript">
        $('#rating-btn').click(function(){
          var user = [[${session.user}]];
          if(user==null) {
            layui.use(function () {
              var layer = layui.layer;
              layer.alert("还未登陆，请登陆之后在进行评价！！！")
            })
          }else{
            var form = document.getElementById("rating-form");
            var userid = user.id
            $("#inputuserid").attr("value",userid);

            form.submit();
          }        })

        $('#collect-btn').click(function(){
          var user = [[${session.user}]];
          var movieid = [[${movie.getId()}]]
          if(user==null) {
            layui.use(function () {
              var layer = layui.layer;
              layer.alert("还未登陆，请登陆之后在进行收藏！！！")
            })
          }else{
            var btn = document.getElementById("collect-btn");
            $("#collect-btn").attr("href","/movie/collect/"+movieid);
            btn.click()
          }        })
    </script>
  </body>
</html>
